<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
import { ref, computed } from 'vue';

const route = useRoute();
const { isFolded } = defineProps(['isFolded']);
const router = useRouter();

// 内文管理的菜单项 - 普通数组
const contentManagementItems = [
    { index: '2-1', title: '发布文章', path: '/home/release' },
    { index: '2-2', title: '文章管理', path: '/home/article' },
    { index: '2-3', title: '分类管理', path: '/home/sort' },
    { index: '2-4', title: '标签管理', path: '/home/tag' },
];

// 站点管理的菜单项 - 普通数组
const siteManagementItems = [
    { index: '3-1', title: '相册管理', path: '/home/album' }, // 修改为实际路径
    { index: '3-2', title: '网站配置', path: '/home/setting' }, // 修改为实际路径
    { index: '3-3', title: '友情管理', path: '/home/friend' }, // 修改为实际路径
];

// 计算当前激活菜单项 - 修复后的版本
const activeMenu = computed(() => {
    const currentPath = route.path;
    
    // 收集所有可能的路由路径
    const allMenuPaths = [
        '/home/statistics', // 仪表盘
        ...contentManagementItems.map(i => i.path), // 直接使用数组
        ...siteManagementItems.map(i => i.path)     // 直接使用数组
    ];
    
    // 1. 尝试精确匹配
    const exactMatch = allMenuPaths.find(path => currentPath === path);
    if (exactMatch) return exactMatch;
    
    // 2. 尝试前缀匹配（处理嵌套路由）
    const prefixMatch = allMenuPaths.find(path => currentPath.startsWith(path));
    if (prefixMatch) return prefixMatch;
    
    // 3. 默认返回当前路径
    return currentPath;
});

// 路由跳转方法
const navigateTo = (path: string) => {
    router.push(path);
};

const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
};

const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
};
</script>

<template>
    <el-aside>
        <el-scrollbar>
            <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" :collapse="isFolded" @open="handleOpen"
                @close="handleClose">
                <!-- 仪表盘 -->
                <el-menu-item index="/home/statistics" @click="navigateTo('/home/statistics')">
                    <el-icon>
                        <Orange />
                    </el-icon>
                    <span>仪表盘</span>
                </el-menu-item>

                <!-- 内文管理 -->
                <el-sub-menu index="content-management"> <!-- 使用唯一标识，不需要绑定路由 -->
                    <template #title>
                        <el-icon>
                            <document />
                        </el-icon>
                        <span>内文管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item v-for="item in contentManagementItems" :key="item.index" :index="item.path"
                            @click="navigateTo(item.path)">
                            {{ item.title }}
                        </el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>

                <!-- 站点管理 -->
                <el-sub-menu index="site-management"> <!-- 使用唯一标识 -->
                    <template #title>
                        <el-icon>
                            <setting />
                        </el-icon>
                        <span>站点管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item v-for="item in siteManagementItems" :key="item.index" :index="item.path"
                            @click="navigateTo(item.path)">
                            {{ item.title }}
                        </el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
            </el-menu>
        </el-scrollbar>
    </el-aside>
</template>
<style lang="less">
    .el-aside {
        width: auto;
        height: 100%;
        background-color: #20222A;

        .el-menu {
            background-color: #20222A;

            .el-menu-item-group {
                background-color: #20222A;
            }

            .el-menu-item {
                color: #fff;

                &.is-active {
                    color: var(--el-menu-active-color);
                }

                &:hover {
                    color: #20222A;
                }
            }
        }

    }

    .el-sub-menu__title {
        color: #fff;

        &:hover {
            background-color: unset;
        }
    }
</style>